<template>
	<view>
		<view class="tab">
			<u-tabs :list="list1" @click="click" :itemStyle="{ width: '110px', height: '50px' }" lineColor="#1BA9BA">
			</u-tabs>
		</view>
		<view class="spcard" v-for="(item, index) in orderList" :key="index" @click="vote">
			<view class="left">
				<view class="v1">{{
                    `${item.departureStation}-${item.terminus} ${item.trainNumber}`
                }}</view>
				<view class="v2">{{ `${item.seat}    ${item.name}` }}</view>
				<view class="v3">{{
                    `${item.departureTime}至${item.arrivalTime}`
                }}</view>
			</view>
			<view class="right">
				<view class="price">￥{{ item.fare }}</view>
				<view class="tickets">
					<text v-if="item.state == 1" :style="{ color: 'green' }">
						出票成功
					</text>
					<text v-else-if="item.state == 2" :style="{ color: 'red' }">
						待支付
					</text>
					<text v-else-if="item.state == 3"> 退款成功 </text>
					<text v-else> 已取消 </text>
				</view>
				<button class="delete">删除订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [{
						name: "关注",
						disabled: true,
					},
					{
						name: "推荐",
						badge: {
							isDot: true,
						},
					},
					{
						name: "电影",
						badge: {
							value: 5,
						},
					},
					{
						name: "科技",
						disabled: true,
					},
					{
						name: "音乐",
					},
					{
						name: "美食",
					},
					{
						name: "文化",
					},
					{
						name: "财经",
					},
					{
						name: "手工",
					},
				],
				list1: [{
						name: "全部",
					},
					{
						name: "待出行",
					},
					{
						name: "待支付",
					},
					{
						name: "退款/已取消",
					},
				],
				title: [{
						name: "合肥南-南京南 G7740",
						name1: "03车厢18A号 李四",
						name2: "2022-06-15 06:24至07:14",
						price: "￥107",
						tickets: "出票成功",
					},
					{
						name: "合肥南-南京南 G7740",
						name1: "03车厢18A号 李四",
						name2: "2022-06-15 06:24至07:14",
						price: "￥107",
						tickets: "待支付",
					},
					{
						name: "合肥南-南京南 G7740",
						name1: "03车厢18A号 李四",
						name2: "2022-06-15 06:24至07:14",
						price: "￥107",
						tickets: "退款成功",
					},
					{
						name: "合肥南-南京南 G7740",
						name1: "03车厢18A号 李四",
						name2: "2022-06-15 06:24至07:14",
						price: "￥107",
						tickets: "已取消",
					},
				],
				orderList: [],
			};
		},
		onLoad() {
			const _this = this;
			uni.request({
				url: "http://localhost:8000/api/tran",
				method: "GET",
				success({
					data
				}) {
					_this.orderList = data.data;
				},
			});
		},
		methods: {
			click(item) {
				console.log("item", item);
			},
			vote() {
				uni.navigateTo({
					url: "/pages/order-details/order-details",
				});
			},
		},
	};
</script>

<style>
	.header {
		margin-left: 41%;
	}

	.tab {
		background-color: white;
	}

	.spcard {
		width: 95%;
		height: 150px;
		background: white;
		margin-top: 13px;
		margin-left: 2.5%;
		border-radius: 22rpx;
		display: flex;
		border-bottom: 2px solid #ccc;
	}

	.v1 {
		font-size: 20px;
		margin-top: 15px;
		margin-left: 15px;
	}

	.v2 {
		margin-top: 10px;
		margin-left: 15px;
	}

	.v3 {
		margin-top: 5px;
		margin-left: 15px;
	}

	.price {
		font-size: 23px;
		font-weight: bold;
		margin-top: 15px;
		margin-left: 100px;
		color: chocolate;
	}

	.tickets {
		margin-top: 10px;
		margin-left: 62%;
		text-align: center;
	}

	.delete {
		border: 1px solid #ccc;
		border-radius: 50px;
		margin-top: 30px;
		margin-left: 80px;
		background-color: white;
		width: 60%;
		font-size: 12px;
	}
</style>